<template>
  <div class="content">
    <div class="content-left">
        <img src="../../public/static/logo.png" alt="" srcset="">
        <div class="logo-text">
            广州管理站综合管理信息管理系统
        </div>

        </div> 
        <div class="content-right">
            <div class="time-content">
               <div class="time-content-left"> 2022年01月20日</div>
               <div class="time-content-right">星期日</div>
            </div>
            <div class="username">
                <div class="user-logo">
                     <svg-icon iconClass="user" className="user" />
                </div>
                <div class="username-text">
                    欢迎您，管理员
                </div>
            </div>
            <div class="exit">
               <svg-icon iconClass="exit" className="exit" /> 
            </div>
        </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.content{
    display: flex;
    padding-left: 10px;
    padding-right: 10px;
    justify-content: space-between;
    .content-left{
        display: flex;
        align-items: center;
        height: 60px;    
        .logo-text{
         font-size: 18px;
         font-weight: 600;
         margin-left: 10px;
         color: #fff;
        }         
        img{
            width: 45px;

        }
    }
    .content-right{
        display: flex;
        height: 60px;
        align-items: center;
        .time-content{
            margin-right: 70px;
            display: flex;
           background: #02805a;
           border-radius: 30px;
           color: #fff;
            padding: 10px;
            .time-content-right{
                margin-left: 20px;
            }
        }
    }
}
.username{
    display: flex;
    align-items: center;
    margin-right: 20px;
    .username-text{
        color: #fff;
    }
}
.user-logo{
.svg-icon {
    font-size: 30px;
}
}
.exit{
    .svg-icon {
    font-size: 25px;
}
}
</style>